<template>
  <div class="confirm">
    <div class="add"
         @click="addAction">
      <div class="l">
        <i class="iconfont icon-didian"></i>
        <span v-if="shouhuo">请添加一个收货地址</span>
        <span v-if="!shouhuo">{{infor}}</span>
      </div>
      <div class="r">
        <i class="iconfont icon-fanhui1"></i>
      </div>
    </div>
    <div class="bor">
      <img src=""
           alt="">
    </div>

    <div class="time">
      <p>送达时间</p>
      <div class="r">
        <p class="t1">尽快送达 | 预计30min</p>
        <p class="take">蜂鸟专送</p>
      </div>
    </div>

    <div class="pay">
      <div class="line1">
        <span>支付方式</span>
        <div class="r">
          <span>在线支付</span>
          <i class="iconfont icon-fanhui1"></i>
        </div>
      </div>
      <div class="line2">
        <span>红包</span>
        <span>暂时只在饿了么APP中支持</span>
      </div>
    </div>

    <Ordercon></Ordercon>

    <div class="beizhu">
      <div class="lin1"
           @click="remarkAction">
        <span>订单备注</span>
        <div class="right">
          <span>{{remarks}}</span>
          <i class="iconfont icon-fanhui1"></i>
        </div>
      </div>
      <div class="lin1 lin2">
        <span>发票抬头</span>
        <div class="right">
          <span>不需要开发票</span>
          <i class="iconfont icon-fanhui1"></i>
        </div>
      </div>
    </div>

    <div class="foot">
      <p class="price">待支付￥ {{waitPay}} </p>
      <p class="btn2"
         @click="pay">确认下单</p>
    </div>
  </div>
</template>

<script>
import Ordercon from '@/components/Order_con_S';
import { Dialog } from 'vant';
export default {
  name: 'Confirm',
  components: {
    Ordercon,
    [Dialog.Component.name]: Dialog.Component,
  },
  data: function () {
    return {
      remarks: localStorage.getItem('spicy') + localStorage.getItem('xiang') + localStorage.getItem('onion') + localStorage.getItem('cu') + localStorage.getItem('green') + localStorage.getItem('ice'),
      infor: this.$route.params.infors,
      shouhuo: true,
      waitPay: JSON.parse(localStorage.getItem('totalprice')) + 111 + 5,
    }
  },
  created () {
    if (this.$route.params.infors) {
      this.shouhuo = false
    }
  },
  methods: {
    addAction () {
      this.$router.push({ name: 'ChooseAddress' })
    },
    remarkAction () {
      this.$router.push({ name: 'OrderRemarks' })
    },
    pay () {
      if (this.$route.params.infors) {
        this.$router.push({ name: 'OnlinePay' });
        localStorage.setItem('waitPay', this.waitPay)
        // localStorage.setItem('img',)
      } else {
        // alert('请选择收货地址')
        Dialog.alert({
          message: '请选择一个地址',
        }).then(() => {
          // on close
        });
      }
      // this.$router.push({ name: 'OnlinePay' });
      // localStorage.setItem('waitPay', this.waitPay)
    }
  },
}
</script>

<style lang="less">
body {
  background-color: #f5f5f5;
}

.confirm {
  .add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    background-color: white;
    min-height: 82px;

    .l {
      .iconfont {
        color: #3190e8;
        font-size: 22px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .bor {
    background-image: url("../assets/1.png");
    background-size: auto 3px;
    background-repeat: repeat-x;
    margin-bottom: 10px;
    height: 3px;
  }

  .time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    border-left: 5px solid #3190e8;
    background-color: white;
    min-height: 90px;
    margin-bottom: 10px;
    p {
      font-size: 18px;
      font-weight: 600;
    }
    .r {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .t1 {
        font-size: 16px;
        color: #3190e8;
        font-weight: normal;
        margin-bottom: 10px;
      }
      .take {
        font-size: 11px;
        width: 50px;
        color: white;
        font-weight: normal;
        background-color: #3190e8;
        text-align: center;
      }
    }
  }

  .pay {
    background-color: white;
    padding: 0 15px 0 15px;
    margin-bottom: 10px;

    .line1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 45px;
      // margin-bottom: 10px;

      span {
        font-size: 16px;
        color: #666;
      }
      .r {
        span {
          font-size: 14px;
          color: #aaa;
        }
        i {
          font-size: 12px;
          color: #ccc;
        }
      }
    }
    .line2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 45px;
      border-top: 0.1px solid #f5f5f5;
      span {
        font-size: 14px;
        color: #aaa;
      }
    }
  }

  .lin1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px 5px;
    box-sizing: border-box;
    background-color: white;
    border-bottom: 0.1px solid #f5f5f5;

    span {
      font-size: 15px;
      color: #333;
    }
    .right {
      span {
        font-size: 14px;
        color: #aaa;
      }
      i {
        color: #aaa;
        font-size: 14px;
      }
    }
  }
  .lin2 {
    margin-bottom: 60px;
  }

  .foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    p {
      font-size: 17px;
      color: white;
      padding: 10px;
      box-sizing: border-box;
    }

    .price {
      width: 70%;
      height: 100%;
      background-color: #3c3c3c;
    }
    .btn2 {
      width: 30%;
      height: 100%;
      background-color: #56d176;
      text-align: center;
    }
  }
}
</style>